<include file="Public:header"/>
<div class="content">
	<div class="decoration"></div>
    
    <div class="container">
    	<h3>Get in touch!</h3>
        <p>A functional, AJAX, PHP contact form with field validation and some nifty animations added to it! Hope you love it!</p>
        <div class="maps-container">
    		<iframe class="responsive-image maps" src="https://maps.google.com/?ie=UTF8&amp;ll=47.595131,-122.330414&amp;spn=0.006186,0.016512&amp;t=h&amp;z=17&amp;output=embed"></iframe>
        </div>
    </div>

    <div class="decoration"></div>
	<div class="container no-bottom">
        <div class="contact-form no-bottom"> 
            <div class="formSuccessMessageWrap" id="formSuccessMessageWrap">
                <div class="notification-box green-box">
                    <h4>YOUR MESSAGE HAS BEEN SENT!</h4>
                    <a href="#" class="close-notification">x</a>
                    <div class="clear"></div>
                    <p>
                        You're message has been successfully sent. Please allow up to 48 hours for us to reply!  
                    </p>  
                </div> 
            </div>
        
            <form action="php/contact.php" method="post" class="contactForm" id="contactForm">
                <fieldset>
                    <span class="formValidationError" id="contactNameFieldError">
                        <div class="small-notification red-notification">
                            <p>Error Sending! Please enter your name!</p>
                        </div>
                    </span>             
                    <span class="formValidationError" id="contactEmailFieldError">
                        <div class="small-notification red-notification">
                            <p>Error Sending! Mail address required!</p>
                        </div>
                    </span> 
                    <span class="formValidationError" id="contactEmailFieldError2">
                        <div class="small-notification red-notification">
                            <p>Error Sending! Valid Email Address Required</p>
                        </div>
                    </span> 
                    <span class="formValidationError" id="contactMessageTextareaError">
                        <div class="small-notification red-notification">
                            <p>Error Sending! Message field is empty!</p>
                        </div>
                    </span>  
                    <div class="formFieldWrap">
                        <label class="field-title contactNameField" for="contactNameField">Name:<span>(required)</span></label>
                        <input type="text" name="contactNameField" value="" class="contactField requiredField" id="contactNameField"/>
                    </div>
                    <div class="formFieldWrap">
                        <label class="field-title contactEmailField" for="contactEmailField">Email: <span>(required)</span></label>
                        <input type="text" name="contactEmailField" value="" class="contactField requiredField requiredEmailField" id="contactEmailField"/>
                    </div>
                    <div class="formTextareaWrap">
                        <label class="field-title contactMessageTextarea" for="contactMessageTextarea">Message: <span>(required)</span></label>
                        <textarea name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea"></textarea>
                    </div>
                    <div class="formSubmitButtonErrorsWrap">
                        <input type="submit" class="buttonWrap button grey contactSubmitButton" id="contactSubmitButton" value="Submit" data-formId="contactForm"/>
                        <a class="button grey" href="tel:+12 345 657 8963">Call Us</a>
                        <a class="button grey" href="sms:+12 345 657 8963">SMS Us</a>
                    </div>
                </fieldset>
            </form>       
        </div>
    </div>
	<div class="decoration"></div>
</div>

<div class="footer no-bottom">
	<p class="center-text footer-text">
    <br>Copyright 2012<br>All rights reseved.<br>
    <a href="#" class="icon icon-facebook"></a>
    <a href="#" class="icon icon-twitter1"></a>
    <a href="#" id="up" class="icon icon-arrow-up"></a>
    </p>
</div>
<div class="footer-decoration"></div>

</body>
</html>

























